<template lang="">
<div class="productDetail" ref="container">
    <div class="header">
      <van-sticky :container="container">
        <van-nav-bar type="warning"
          title="订单确认"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
        />
      </van-sticky>
    </div>
    <div class="detail">
    <van-cell title="服务地址" size="large" icon="orders-o" class="cell" @click="onSelect">
    <template #label>
      <p v-if="name">姓名:{{name}}</p>
      <p v-if="address">地址:{{address}}</p>
      <p v-if="tel">电话:{{tel}}</p>
    </template>
    </van-cell>
    <!--  -->
    <van-action-sheet v-model="show" title="标题">
    <div class="content">
        <van-address-list
        v-model="chosenAddressId"
        :list="list"
        default-tag-text="默认"
        add-button-text="确认地址"
        @select="confirm"/>
    </div>
    </van-action-sheet>
    <!--  -->
    <van-cell title="订单详情" size="large" class="cell">
    <template #label>
    <div>
    <van-row v-for="item in obline" :key="item.id">
      <van-col span="8" v-if="item.number != 0">{{ item.productName }}</van-col>
      <van-col span="8" v-if="item.number != 0">￥{{ item.price }}</van-col>
      <van-col span="8" v-if="item.number != 0">x{{ item.number }}</van-col>
    </van-row>
    <van-row>
      <van-col span="6"></van-col>
      <van-col span="6"></van-col>
      <van-col span="6"></van-col>
      <van-col span="6">总计:￥{{ total }}</van-col>
    </van-row>
    </div> 
  </template>
  </van-cell>
    <div class="time">
     <van-cell title="服务时间" size="large" icon="clock-o"  class="cell" @click="showPopup" :value="nowTime"/>
     <van-popup v-model="showTime" position="bottom" :style="{ height: '40%' }">
         <van-datetime-picker
            v-model="currentDate"
            type="date"
            title="选择服务时间"
            :min-date="minDate"
            :max-date="maxDate"
            @cancel="closeTime"
            @confirm="confirmTime"
            />
    </van-popup>

        </div>
        <div class="submitBotton">
            <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" round class="btnStyle" @click="submitBtn">
                确认提交
            </van-button>
        </div>
    </div>
</div> 

</template>
<script>
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
import { get, post, post_json } from "@/http/axios";
import moment from 'moment'
import qs from 'qs'
import {Toast} from 'vant'
export default {
  data() {
    return {
      obline: this.$route.query.data2,
      show: false,
      showTime: false,
      chosenAddressId: "1",
      AddressId:"",
      list: [],
      name: "",
      address: "",
      tel: "",
      total: this.$route.query.total,
      minDate: new Date(),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      nowTime:moment(new Date().getTime()).format("YYYY-MM-DD HH:mm"),
      serveTime:new Date().getTime(),
      customerId:'',
       container: null,
    };
  },
   mounted() {
    this.container = this.$refs.container;
  },
  computed: {},
  methods: {
    closeTime(){
    this.showTime=false
    },
    confirmTime(value){
        this.nowTime=moment(value.getTime()).format("YYYY-MM-DD HH:mm");
        this.serveTime=value.getTime()
        this.showTime=false;
    },
    showPopup(){
      this.showTime=true
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onSelect() {
      //  this.list[1].isDefault=true
    //   console.log(this.list);
      this.show = true;
    },
    confirm(item, index) {
      this.name = item.name;
      this.address = item.address;
      this.tel = item.tel;
      this.AddressId=item.id
      this.show = false;
    },
    async selectAddress() {
      let data = {
        page: 1,
        pageSize: 100,
      };
      let res = await get("/address/pageQuery", data);
      for (let item of res.data.data.list) {
        this.list.push({
          id: item.id,
          name: item.username,
          tel: item.telephone,
          address: item.province + item.city + item.area + item.address,
          isDefault: false,
        });
      }
      this.list[0].isDefault = true;
      this.name = this.list[0].name;
      this.address = this.list[0].address;
      this.tel = this.list[0].tel;
      this.chosenAddressId = this.list[0].id;
      this.AddressId=this.list[0].id;
    },
   async submitBtn(){
      let data ={
        addressId: this.AddressId,
        customerId: this.customerId,
        orderLines: this.obline,
        serviceTime: this.serveTime
        }
      let res = await post_json("/order/submitOrder",data)
        // console.log(res.data);
        if(res.data.message=="操作成功"){
            Toast.success('订单提交成功');
            this.$router.push({
            path:'/manager/order'
          })
        }
        if(res.data.message=="余额不足!"){
           Toast.fail('余额不足');
        }
  },
    async getUserID(){
        let data={
            page:1,
            pageSize:10,
            username:localStorage.getItem("username")
        }
        let res = await get("/baseUser/pageQuery",data)
        this.customerId=res.data.data.list[0].id
    }
},
  created() {
    this.selectAddress();
    this.getUserID()
  },
};
</script>
<style scoped>
.cell {
  margin: 10px auto;
  /* box-shadow: 2px 2px 2px 2px rgba(158, 117, 255, 0.2); */
  box-shadow: 2px 2px 2px #acb6e5;
  transition: 0.3s;
  width: 95%;
  border-radius: 5px;
}
.content {
  padding: 16px 16px 160px;
}
.submitBotton{
    width: 53%;
    height: 40px;
    text-align: center;
    color: #fff;
    border-radius: 22px;
    line-height: 40px;
    margin: 0 auto;
    margin-top: 0px;
    margin-top: 2em;
    cursor: pointer;
}

.btnStyle{
    width: 100%;
    height: 40px;
}
.van-icon-edit{
 display:none;
}
.van-nav-bar{
  height: 60px;
  /* background: linear-gradient(to left, #3494e6, #ec6ead); */
    background: linear-gradient(to right, #acb6e5, #86fde8);
}
.productDetail {
  width: 100%;
  height: 100%;
  /* height: 1137px; */
  background-image: url("../Home/y0.jpg");
  background-repeat: repeat;
}
::v-deep .van-nav-bar__title{
  margin-top: 40px;
  font-size: 25px;
  color: white;
  font-family: "华文行楷";
}
::v-deep .van-nav-bar__arrow{
  margin-top: 40px;
    color: white;
}
::v-deep .van-nav-bar__text{
  margin-top: 40px;
    color: white;
}

</style>